import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Alert"
  component="bl-alert"
  argTypes={{
    variant: {
      options: ['info', 'warning', 'success', 'danger'],
      default: 'info',
      control: { type: 'select' }
    },
    description: {
      control: 'text'
    },
    icon: {
      control: 'text'
    },
    closable: {
      control: 'boolean'
    },
    caption: {
      control: 'text'
    },
    actionLabel: {
      control: 'text'
    }
  }}
/>

export const actionSlot = (actionLabel) => html`
  <bl-button slot="action">${unsafeHTML(actionLabel)}</bl-button>
  <bl-button slot="action-secondary">${unsafeHTML(actionLabel)}</bl-button>
`;

export const SingleAlertTemplate = (args) => html`<bl-alert
  variant=${ifDefined(args.variant)}
  caption=${ifDefined(args.caption)}
  ?icon=${ifDefined(args.icon)}
  ?closable=${ifDefined(args.closable)}>${
    unsafeHTML(args.content)
  }${
    args.actionLabel ? actionSlot(args.actionLabel) : null
  }</bl-alert>`;

# Alert

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/138)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3607)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Alert component displays an informational message to users with additional features if desired.

### Usage

* Explain how to resolve the issue by including any troubleshooting actions or next steps.
* You can include links within the notification body that redirect the user to next steps by using an actionable notification.
* Alerts can be closable, use the icon button for closing action on the right.
* Default alert is Captionless Informational Alert without icon.
* We have default icons that we recommend in our icon alert variants but these icons can be changed from the icon list.

## Alert Variants

We have 4 variants for each alert: **Info**, **Warning**, **Success** and **Danger**.

<Canvas isColumn>
  <Story name="Info Variant" args={{content: 'Info Variant'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Warning Variant" args={{variant: 'warning', icon: true, content: 'Warning Variant'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Success Variant" args={{variant: 'success', content: 'Success Variant'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Danger Variant" args={{variant: 'danger', icon: true, content: 'Danger Variant'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
</Canvas>

## Alert Types

We have 2 types of alerts: **Captionless** (Default) and **Captioned**.

### Captioned Alert

The caption should be one line, short and descriptive. In detailed description be concise and avoid repeating or paraphrasing the caption.

<Canvas isColumn>
  <Story name="Captioned Info Alert" args={{caption: "Info Caption", content: "Detailed description.", icon: true}}>
    {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captioned Warning Alert" args={{variant: "warning", caption: "Warning Caption", content: `Detailed description.`, actionLabel: 'Action Link'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captioned Success Alert" args={{variant: "success", caption: "Success Caption", content: "Detailed description.", closable: true}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captioned Danger Alert" args={{variant: "danger", caption: "Danger Caption", content: "Detailed description.", actionLabel: 'Action Link'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
</Canvas>

### Captionless Alert

Alerts don't always have to have a caption, you can use plain text to explain the situation.

<Canvas isColumn>
  <Story name="Captionless Info Alert" args={{content: "Informational Text", icon: true}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captionless Warning Alert" args={{variant: "warning", content: "Warning Text"}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captionless Success Alert" args={{variant: "success",content: "Success Text", icon: true, closable: true}}>
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story name="Captionless Danger Alert" args={{variant: "danger", content: "Danger Text", actionLabel: 'Action Link'}}>
      {SingleAlertTemplate.bind({})}
  </Story>
</Canvas>

## Responsivity

To maintain usability level of alert component, after 1024px width screen size or less (such as tablets and mobile screens):
Don't show actionable link as a button. Instead, give action link to all alert component area and show clickability with arrow icon.

<Canvas isColumn>
  <Story
    name="Responsive Alert without Action Slot"
    parameters={{
      chromatic: { viewports: [375] },
      viewport: {
        defaultViewport: "responsive",
        viewports: INITIAL_VIEWPORTS
      },
    }}
    args={{caption: "Informational Caption", content: "Detailed description.", icon: true, closable: true}}
  >
      {SingleAlertTemplate.bind({})}
  </Story>
  <Story
    name="Responsive Alert with Action Slot"
    parameters={{
      chromatic: { viewports: [375] },
      viewport: {
        defaultViewport: "responsive",
        viewports: INITIAL_VIEWPORTS,
      },
    }}
    args={{caption: "Informational Caption", content: `Detailed description.`, icon: true, closable: true, actionLabel: 'Action Link'}}
  >
      {SingleAlertTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The alert component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px; flex-direction: column;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-alert variant="info" caption="Information Alert" icon>
            This is an example of a left-to-right alert with an action button.
            <bl-button slot="action">Action</bl-button>
          </bl-alert>
          <bl-alert variant="warning" caption="Warning Alert" icon style="margin-top: 16px;">
            This is another example with a warning variant.
            <bl-button slot="action">Action</bl-button>
          </bl-alert>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-alert variant="info" caption="تنبيه معلومات" icon>
            هذا مثال على تنبيه من اليمين إلى اليسار مع زر إجراء.
            <bl-button slot="action">إجراء</bl-button>
          </bl-alert>
          <bl-alert variant="warning" caption="تنبيه تحذير" icon style="margin-top: 16px;">
            هذا مثال آخر مع تنبيه تحذيري.
            <bl-button slot="action">إجراء</bl-button>
          </bl-alert>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Alert RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .alert-container {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-top: 20px;
    }
    .alert-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="alert-container">
      <!-- LTR Example -->
      <div class="alert-group">
        <h3>LTR Alerts</h3>
        <bl-alert variant="info" caption="Information Alert" icon>
          This is an example of a left-to-right alert with an action button.
          <bl-button slot="action">Action</bl-button>
        </bl-alert>
        <bl-alert variant="warning" caption="Warning Alert" icon>
          This is another example with a warning variant.
          <bl-button slot="action">Action</bl-button>
        </bl-alert>
      </div>

      <!-- RTL Example -->
      <div class="alert-group" dir="rtl">
        <h3>RTL Alerts</h3>
        <bl-alert variant="info" caption="تنبيه معلومات" icon>
          هذا مثال على تنبيه من اليمين إلى اليسار مع زر إجراء.
          <bl-button slot="action">إجراء</bl-button>
        </bl-alert>
        <bl-alert variant="warning" caption="تنبيه تحذير" icon>
          هذا مثال آخر مع تنبيه تحذيري.
          <bl-button slot="action">إجراء</bl-button>
        </bl-alert>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating an alert programmatically
    const createAlert = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const alert = document.createElement('bl-alert');
      alert.variant = 'info';
      alert.icon = true;

      if (isRTL) {
        alert.caption = 'تنبيه معلومات';
        alert.textContent = 'هذا مثال على تنبيه من اليمين إلى اليسار.';

        const actionButton = document.createElement('bl-button');
        actionButton.slot = 'action';
        actionButton.textContent = 'إجراء';
        alert.appendChild(actionButton);
      } else {
        alert.caption = 'Information Alert';
        alert.textContent = 'This is an example of a left-to-right alert.';

        const actionButton = document.createElement('bl-button');
        actionButton.slot = 'action';
        actionButton.textContent = 'Action';
        alert.appendChild(actionButton);
      }

      container.appendChild(alert);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-alert" />

## Public Functions

* `open()`: Can be used to reopen closed alert.
* `close()`: Can be used to close alert.

Example usage;

```
document.querySelector('bl-alert').open();
document.querySelector('bl-alert').close();
```
